<template>
	<z-paging v-model="list" ref="paging"   :default-page-size="params.pageSize"  @query="getList">
		<template #top>
			<view class="top mx-20 flex justify-between">
				<view>共<text class="red">{{ total }}</text>人</view>
				<view class="red" @click="record">申请记录 ></view>
			</view>
			<view class="search-box flex item-center">
				<image src="../../../static/svg/icon-search.svg" mode="heightFix" class="icon-search"></image>
				<input type="text" placeholder="搜索策划人昵称" v-model="params.businessShortName" class="search-inp">
			</view>
			<!-- <view class="sel-asc">
				<view class="flex item-center justify-between">
					<view class="asc-item flex item-center" @click="changeOrderBy(1)">
						<text class="asc-text" :class="{'active':params.sortField == 1}">分销金额</text>
						<view class="flex flex-col">
							<image class="icon-up"
								:src="params.sortType == 2 && params.sortField == 1?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
							<image class="icon-down"
								:src="params.sortType == 1 && params.sortField == 1?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
						</view>
					</view>
					<view class="asc-item flex item-center" @click="changeOrderBy(2)">
						<text class="asc-text" :class="{'active':params.sortField == 2}">分销佣金</text>
						<view class="flex flex-col">
							<image class="icon-up"
								:src="params.sortType == 2 && params.sortField == 2?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
							<image class="icon-down"
								:src="params.sortType == 1 && params.sortField == 2?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
						</view>
					</view>
					<view class="asc-item flex item-center" @click="changeOrderBy(3)">
						<text class="asc-text" :class="{'active':params.sortField == 3}">分销订单数</text>
						<view class="flex flex-col">
							<image class="icon-up"
								:src="params.sortType == 2 && params.sortField == 3?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
							<image class="icon-down"
								:src="params.sortType == 1 && params.sortField == 3?'../../static/role/sel-vector.svg':'../../static/role/vector.svg'"
								mode=""></image>
						</view>
					</view>
				</view>
			</view> -->
		</template>
		<view v-for="item in list" v-if="list.length" class="agent-box" :key="item.id">
			<view class="flex justify-between item-center">
				<view class="flex item-center">
					<image :src="item.logo" mode="" class="img-avatar mr-8"></image>
					<view class="flex flex-col justify-between">
						<view>
							<text class="nick-name">{{item.businessShortName}}</text>
						</view>
						<view class="gray">注册时间：{{ item.createTime }}</view>
					</view>
				</view>
				<image class="size-20 self-start" src="@/pagesD/static/role/icon-dot.svg" @click.stop="action(item)"></image>
			</view>
			<view class="mt-20 flex item-center justify-between">
				<view class="flex item-center flex-col">
					<view>{{item.totalOrderCount}}</view>
					<view class="gray">累计订单</view>
				</view>
				<view class="flex item-center flex-col">
					<view>{{ item.totalSettleCommission }}</view>
					<view class="gray">累计佣金</view>
				</view>
				<view class="flex item-center flex-col">
					<!-- <view>{{ item.totalOrderAmt }}</view>
					<view class="gray">本月佣金</view> -->
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		mathHeight
	} from '@/utils/index.js'
	import {pageMyBusiness, unBindMyBusiness} from '@/api/business.js'
	const h = ref(0)
	h.value = mathHeight(200)
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	const params = ref({
		sortField: '',
		sortType: 1,
		businessShortName: '',
		pageNum: 1,
		pageSize: 15
	})
	const paging = ref()
	const record = () => {
		uni.navigateTo({
			url:`/pagesD/role/applicationRecords`
		})
	}
	const action = (item) => {
		uni.showActionSheet({
			itemList: ['解除关联'],
			success: function (res) {
				uni.showModal({
					title: '',
					content: `确定解除与【${item.businessShortName}】关联？`,
					success: async function (res) {
						if (res.confirm) {
							let result = await unBindMyBusiness({
								businessId: item.businessId
							})
							if (result) {
								uni.showToast({
									title: '解除成功',
									icon: 'none'
								})
								setTimeout(() => {
									reFresh()
								}, 1000)
							}
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	const getList = async (num) => {
		triggered.value = true
		uni.showLoading()
		params.value.pageNum = num
		let result = await pageMyBusiness({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
			total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.value.pageNum + 1
		getList()
	}
	const onRestore = () => {
		triggered.value = false; // 需要重置
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	watch(() =>params.value.businessShortName,(val) => {
		reFresh()
	})
	const changeOrderBy = (i) => {
		if (i != params.value.sortField) {
			params.value.sortField = i
			params.value.sortType = 1
		} else {
			if (params.value.sortType == 2) {
				params.value.sortField = ''
			}
			params.value.sortType = params.value.sortType == 1 ? 2 : 1
		}
		reFresh()
	}
	const linkHomePage = (agent) => {
		uni.navigateTo({
			url:`/pagesA/merchant/homepage?id=${agent.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.red {
		color: #FA4543;
		font-size: 16px;
	}
	.top{
		margin-top: 48px;
	}
	.search-box{
		margin: 12px 20px 20px;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0px 10px;
		height: 36px;
		.icon-search{
			height: 20px;
		}
		.search-inp{
			width: calc(100% - 40px);
			margin-left: 10px;
			font-size: 12px;
		}
	}
	.sel-asc {
		margin: 0 20px;
		padding: 10px 0;
		color: #999999;
		font-size: 14px;
		min-height: 40px;
		.asc-item {
			margin-right: 20px;
			&:last-child{
				margin-right: 0px;
			}
			.asc-text {
				margin-right: 4px;
	
				&.active {
					color: #FA4543;
				}
			}
	
		}
	
	}
	
	.icon-up {
		width: 8px;
		height: 8px;
	}
	
	.icon-down {
		width: 8px;
		height: 8px;
		transform: rotate(180deg)
	}
	.gray{
		color: rgba(51,51,51,0.6);
	}
	
	.agent-box {
		margin: 0 16px 12px;
		padding: 12px;
		background-color: #ffffff;
		border-radius: 8px;
	
		.img-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	
		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
	}
	.no-page-tit{
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}
</style>